package com.example.understand_compose1.testcase_compose.page

import androidx.annotation.DrawableRes
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material3.Button
import androidx.compose.material3.Card
import androidx.compose.material3.Icon
import androidx.compose.material3.Slider
import androidx.compose.material3.Switch
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.runtime.setValue
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import com.example.understand_compose1.R

@Preview
@Composable
fun TextViewExample() {
    Button(onClick = {
        println("Hello world")
    },
        modifier = Modifier.padding(16.dp)
        ) {
        Text(text = "hello world")
    }
}

// 画一条彩色线条
@Preview(showBackground = true)
@Composable
fun CanvasDemo() {
    Canvas(modifier = Modifier.fillMaxWidth().height(800.dp)) { // height是屏幕高度
        val canvasWidth = size.width
        val canvasHeight = size.height
        drawLine(
            brush = Brush.linearGradient(colors = listOf(Color.Red, Color.Blue, Color.Green)),
            start = Offset.Zero,
            end = Offset(canvasWidth, canvasHeight),
            strokeWidth = 10f
        )
    }
}

// 一个滑动条的例子
@Preview(showBackground = true)
@Composable
fun SliderDemo() {
    var slideValue by remember { mutableFloatStateOf(0f) }
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = slideValue.toString())
        Slider(
            value = slideValue,
            onValueChange = { slideValue = it },
            valueRange = 0f..5f,
            steps = 4
        )
    }
}

@Composable
fun PreviewTextField(text: String, onTextChange: (String) -> Unit) {
    TextField(
        value = text,
        onValueChange = onTextChange,
        label = { Text("Enter text") }
    )
}
// TextField例子
@Preview
@Composable
fun PreviewTextFieldPreview() {
    var text by remember { mutableStateOf("Hello, Compose!") }
    PreviewTextField(text = text) { text = it }
}

@Composable
fun PreviewSwitch(checked: Boolean, onCheckedChange: (Boolean) -> Unit) {
    Switch(checked = checked, onCheckedChange = onCheckedChange)
}

@Preview
@Composable
fun PreviewSwitchPreview() {
    var checked by remember { mutableStateOf(false) }
    PreviewSwitch(checked = checked) { checked = it }
}

@Composable
fun PreviewSlider(value: Float, onValueChange: (Float) -> Unit) {
    Slider(
        value = value,
        onValueChange = onValueChange,
        valueRange = 0f..100f,
        steps = 5
    )
}

@Preview
@Composable
fun PreviewSliderPreview() {
    var value by remember { mutableStateOf(0f) }
    PreviewSlider(value = value) { value = it }
}

@Composable
fun PreviewCard(content: @Composable () -> Unit) {
    Card(/*elevation = 4.dp*/) {
        Box(modifier = Modifier.padding(8.dp)) {
            content()
        }
    }
}

@Preview
@Composable
fun PreviewCardPreview() {
    PreviewCard {
        Text("Card content")
    }
}

@Composable
fun PreviewImage(@DrawableRes imageRes: Int) {
    Image(
        painter = painterResource(id = imageRes),
        contentDescription = "Image preview",
        modifier = Modifier.size(100.dp),
        contentScale = ContentScale.Fit // 根据需要调整 contentScale
    )
}

@Preview
@Composable
fun PreviewImagePreview() {
    PreviewImage(R.drawable.ic_launcher_background)
}

@Preview
@Composable
fun EmailRow() {
    Row {
        Icon(
            imageVector = Icons.Filled.Email,
            contentDescription = "Email Icon"
        )

        Text(text = "example-com@what-mail.what-postfix")
    }
}

// 一个正方体
@Preview
@Composable
fun SquareBox() {
    Box(
        modifier = Modifier.width(100.dp).height(100.dp).background(Color(0x18181818))
    ) {
        Text(text = "Square Example")
    }
}

// padding用于在元素周围添加间距，例如，给一个文本添加内边距
@Preview
@Composable
fun PaddedText() {
    Column {
        Button(onClick = {

        },
            ) {

        }
        Text(
            text = "Padding Text",
            modifier = Modifier.padding(16.dp)
        )
    }
}

